<template>
  <div class="app-page-scroll">
    <h4 style="color: red">请拉伸页面宽度观察组件工作</h4>
    <t-card header="基础用法">
      <lg-grid>
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
        <div>F</div>
        <div>G</div>
        <div>H</div>
        <div>I</div>
        <div style="--lg-grid-min: 2; --lg-grid-max: 4">最小占2格，最大占4格</div>
        <div style="--lg-grid-min: 2; --lg-grid-max: 4">最小占2格，最大占3格</div>
      </lg-grid>
    </t-card>
    <t-card header="指定列宽&嵌套">
      <lg-grid :width="300">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
        <div>F</div>
        <div>G</div>
        <div style="max-width: 100%">自定义宽度</div>
        <div>
          <lg-grid :width="100">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
          </lg-grid>
        </div>
      </lg-grid>
    </t-card>
    <t-card header="设置间距">
      <div class="cpm-separator">数值配置：:gap="12"</div>
      <lg-grid :gap="12">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
        <div>F</div>
        <div>G</div>
        <div>H</div>
        <div>I</div>
      </lg-grid>
      <div class="cpm-separator">数组配置：:gap="[12, 24]"</div>
      <lg-grid :gap="[12, 24]">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
        <div>F</div>
        <div>G</div>
        <div>H</div>
        <div>I</div>
      </lg-grid>
    </t-card>
    <t-card header="非组件用法">
      <div class="cpm-separator">指令用法：v-grid="400"</div>
      <div v-grid="400">
        <div>A</div>
        <div>B</div>
        <div>C</div>
        <div>D</div>
        <div>E</div>
        <div>F</div>
        <div>G</div>
        <div>H</div>
        <div>I</div>
      </div>
      <div class="cpm-separator">class用法：class="lg-grid"</div>
      <div class="lg-grid" style="--grid: 3">
        <div>A</div>
        <div style="--grid-item: 2">占两格： style="--grid-item: 2"</div>
        <div>C</div>
        <div style="--grid-item-s6: 2">屏幕大于1888px的时候占两格：style="--grid-item-s6: 2"</div>
        <div>E</div>
        <div>F</div>
        <div>G</div>
        <div>H</div>
        <div>I</div>
      </div>
      <div class="cpm-separator">class响应式：class="lg-grid"</div>
      <div
        class="lg-grid gl-mb"
        style="--grid-s1: 1; --grid-s2: 2; --grid-s3: 3; --grid-s4: 4; --grid-s5: 5; --grid-s6: 6"
      >
        <div>A</div>
        <div style="--grid-item: 2">占两格： style="--grid-item: 2"</div>
        <div>C</div>
        <div style="--grid-item-s6: 2">屏幕大于1888px的时候占两格：style="--grid-item-s6: 2"</div>
        <div>E</div>
        <div>F</div>
        <div>G</div>
        <div class="lg-hide-s4">H</div>
        <div class="lg-show-s4 lg-show-s5">I</div>
      </div>
      <t-space>
        <div class="lg-show-s1">屏幕大小 s1 时显示</div>
        ，
        <div class="lg-show-s2">屏幕大小 s2 时显示</div>
        ，
        <div class="lg-show-s3">屏幕大小 s3 时显示</div>
        ，
        <div class="lg-show-s4">屏幕大小 s4 时显示</div>
        ，
        <div class="lg-show-s5">屏幕大小 s5 时显示</div>
        ，
        <div class="lg-show-s6">屏幕大小 s6 时显示</div>
        ，
        <div class="lg-hide-s1">屏幕大小 s1 时隐藏</div>
        ，
        <div class="lg-hide-s2">屏幕大小 s2 时隐藏</div>
        ，
        <div class="lg-hide-s3">屏幕大小 s3 时隐藏</div>
        ，
        <div class="lg-hide-s4">屏幕大小 s4 时隐藏</div>
        ，
        <div class="lg-hide-s5">屏幕大小 s5 时隐藏</div>
        ，
        <div class="lg-hide-s6">屏幕大小 s6 时隐藏</div>
      </t-space>
    </t-card>
    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
      <div>其他属性参考使用的组件</div>
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
      <div>事件参考使用的组件</div>
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { ref } from 'vue';
import { LgGrid } from '@/soar';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';

const value = ref();

const propsData = [
  { name: 'width', desc: '每个宫格的最小宽度', type: 'number', def: '350' },
  { name: 'gap', desc: '间距，数组时第一个是垂直间距，第二个是水平间距', type: 'number | [number, number]', def: '-' },
  { name: 'disabled', desc: '是否禁用，禁用后将不再监听宽度变化', type: 'boolean', def: 'false' },
  { name: 'component', desc: '使用的组件（宫格容器）', type: 'string | Component', def: 'div' },
  { name: 'minColumn', desc: '最少列数', type: 'number', def: '1' },
  { name: 'maxColumn', desc: '最大列数', type: 'number', def: 'Infinity' },
];

const emitData = [{ name: 'change', desc: '布局发生变化', param: 'count: 每行宫格数' }];

const apiData = [
  // { name: 'code', desc: '字典code', type: 'string', sample: '' },
];

const slotData = [
  // { name: 'code', desc: '字典code', scope: 'string' },
];
</script>

<style lang="less" scoped>
.lg-grid-container,
.lg-grid-v,
.lg-grid {
  > div {
    text-align: center;
    border: #ddd solid 1px;
  }
}
</style>
